<!--
汇总几何体
 -->
<template>
  <div class="container">
    <div id="cesiumContainer"> </div>
  </div>
</template>

<script>
  export default {
    name: "cesiumviewer",
    data() {
      return {
        viewer: {},
      }
    },
    mounted() {
      var Cesium = this.Cesium;
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, // 是否显示动画控件
        homeButton: false, // 是否显示home键
        geocoder: false, // 是否显示地名查找控件
        baseLayerPicker: true, // 是否显示图层选择控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: true, // 是否全屏显示
        infoBox: true, // 是否显示点击要素之后显示的信息
        sceneModePicker: false, // 是否显示投影方式控件  三维/二维
        navigationInstructionsInitiallyVisible: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
        orderIndependentTranslucency: false,
        shouldAnimate: true,
        scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
        selectionIndicator: false // 取消点击有绿框
      });
      this.viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏ceisum标识
      //this.viewer.cesiumWidget.creditContainer.style.display = 'none'; //隐藏ceisum标识

      let viewer = this.viewer
      // 盒子
      viewer.entities.add({
        name: 'Blue box',
        position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000),
        box: {
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), // 长、宽、高
          material: Cesium.Color.BLUE
          // fill : false, // 是否填充
          // outline : true, // 是否显示边框
          // outlineColor : Cesium.Color.BLACK // 边框颜色
        }
      });

      // 圈和椭圆
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 150000.0),
        name: 'Green circle at height with outline',
        ellipse: {
          semiMinorAxis: 300000.0, // 短半轴长度
          semiMajorAxis: 300000.0, // 长半轴长度 =========长轴和短轴一样则为圆
          height: 400000.0, // 离地高度
          extrudedHeight: 200000.0, // 拉伸高度 ==== 高度-拉伸高度=立体
          rotation: Cesium.Math.toRadians(45), // 旋转
          material: Cesium.Color.GREEN,
          outline: true // height must be set for outline to display
        }
      });

      // 走廊 entity.corridor
      viewer.entities.add({
        name: 'Red corridor on surface with rounded corners',
        corridor: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            -100.0, 40.0,
            -105.0, 40.0,
            -105.0, 35.0
          ]), // 中心点集
          height: 100000.0,
          extrudedHeight: 50000.0,
          width: 200000.0, // 缓冲带宽 == 走廊宽度
          cornerType: Cesium.CornerType.MITERED, // BEVELED斜角 MITERED直角 ROUNDED圆角
          material: Cesium.Color.RED.withAlpha(0.5),
          outline: true, // height or extrudedHeight must be set for outlines to display
          outlineColor: Cesium.Color.WHITE
        }
      });


      // 气缸和锥体 entity.cylinder
      viewer.entities.add({
        name: 'Green cylinder with black outline',
        position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 200000.0),
        cylinder: {
          length: 400000.0, // 高度
          topRadius: 100000.0, // 顶部的宽度 == 当topRadius和bottomRadius一致的时，就是气缸
          bottomRadius: 200000.0, // 底部的宽度
          material: Cesium.Color.GREEN.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.DARK_GREEN
        }
      });


      // 多边形 entity.polygon
      viewer.entities.add({
        name: 'Red polygon on surface',
        polygon: {
          // hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
          //     -115.0, 32.0,
          //     -107.0, 33.0,
          //     -102.0, 31.0,
          //     -102.0, 35.0]), // 统一高度
          // extrudedHeight: 500000.0, // 拉伸高度

          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([-108.0, 25.0, 10,
            -108.1, 25.0, 10,
            -108.1, 30.0, 10,
            -107.9, 28.0, 10,
            -108, 25.0, 10
          ]), // 自定义高度

          extrudedHeight: 0, // 拉伸高度
          perPositionHeight: true,
          closeTop: true, // 多面体顶部是否封闭
          closeBottom: true, // 多面体底部是否封闭
          material: Cesium.Color.RED
        }
      });

      // 挖洞的多边形
      viewer.entities.add({
        name: 'Blue polygon with holes',
        polygon: {
          hierarchy: {
            positions: Cesium.Cartesian3.fromDegreesArray([-99.0, 30.0,
              -85.0, 30.0,
              -85.0, 40.0,
              -99.0, 40.0
            ]),
            holes: [{
              positions: Cesium.Cartesian3.fromDegreesArray([
                -97.0, 31.0,
                -97.0, 39.0,
                -87.0, 39.0,
                -87.0, 31.0
              ]),
              holes: [{
                positions: Cesium.Cartesian3.fromDegreesArray([
                  -95.0, 33.0,
                  -89.0, 33.0,
                  -89.0, 37.0,
                  -95.0, 37.0
                ]),
                holes: [{
                  positions: Cesium.Cartesian3.fromDegreesArray([
                    -93.0, 34.0,
                    -91.0, 34.0,
                    -91.0, 36.0,
                    -93.0, 36.0
                  ])
                }]
              }]
            }]
          },
          material: Cesium.Color.BLUE.withAlpha(0.5),
          height: 0,
          outline: true // height is required for outline to display
        }
      });

      // 折线 entity.polyline
      viewer.entities.add({
        name: 'Red line on the surface',
        polyline: {
          // positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([-75, 35, 10000000, -125, 35, 10000000]),
          width: 10,

          // material: Cesium.Color.RED // 普通样式

          // material : new Cesium.PolylineGlowMaterialProperty({
          //     glowPower : 0.2, // 发光的宽度 为 线的 倍数
          //     color : Cesium.Color.RED
          // }) // 发光样式

          // material : new Cesium.PolylineOutlineMaterialProperty({
          //     color : Cesium.Color.ORANGE,
          //     outlineWidth : 2,
          //     outlineColor : Cesium.Color.RED
          // }) // 线的边框线

          // material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE), // 带箭头
          // followSurface: true //指定是直线还是弧线==浮在表面

          material: new Cesium.PolylineDashMaterialProperty({
            color: Cesium.Color.CYAN, // 线颜色
            gapColor: Cesium.Color.RED, // 分段颜色==默认透明
            dashLength: 60 // 分段线的长度 16px

          }) // 分段线
        }
      });
      //*******************************
      viewer.entities.add({
        name: 'Red tube with rounded corners',
        polylineVolume: {
          positions: Cesium.Cartesian3.fromDegreesArray([-85.0, 32.0,
            -85.0, 36.0,
            -89.0, 36.0
          ]),
          shape: this.computeCircle(60000.0), // 圆
          material: Cesium.Color.RED
        }
      });
      viewer.entities.add({
        name: 'Green box with beveled corners and outline',
        polylineVolume: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([-90.0, 32.0, 0.0,
            -90.0, 36.0, 100000.0,
            -94.0, 36.0, 0.0
          ]),
          shape: [new Cesium.Cartesian2(-50000, -50000),
            new Cesium.Cartesian2(50000, -50000),
            new Cesium.Cartesian2(50000, 50000),
            new Cesium.Cartesian2(-50000, 50000)
          ], // 矩形
          cornerType: Cesium.CornerType.MITERED,
          material: Cesium.Color.GREEN.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.BLACK
        }
      });
      viewer.entities.add({
        name: 'Blue star with mitered corners and outline',
        polylineVolume: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([-95.0, 32.0, 0.0,
            -95.0, 36.0, 100000.0,
            -99.0, 36.0, 200000.0
          ]),
          shape: this.computeStar(7, 70000, 50000), // 星星
          cornerType: Cesium.CornerType.ROUNDED,
          material: Cesium.Color.BLUE
        }
      });

      // 矩形 entity.rectangle
      viewer.entities.add({
        name: 'Red translucent rectangle',
        rectangle: {
          coordinates: Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
          material: Cesium.Color.RED.withAlpha(0.5),
          rotation: Cesium.Math.toRadians(45), // 旋转
          extrudedHeight: 300000.0, // 拉伸
          height: 100000.0, // 高度
          outline: true,
          outlineColor: Cesium.Color.BLACK
        }
      });

      // 球体和椭球体 entity.ellipsoid
      viewer.entities.add({
        name: 'Blue ellipsoid',
        position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
        ellipsoid: {
          radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0), // 长轴、短轴、高度
          material: Cesium.Color.BLUE,
          outline: true,
          outlineColor: Cesium.Color.BLACK,
          fill: false,
          slicePartitions: 24, // 横切
          stackPartitions: 36 // 竖切
        }
      });

      // 墙壁 entity.wall
      viewer.entities.add({
        name: 'Red wall at height',
        wall: {
          positions: Cesium.Cartesian3.fromDegreesArray([-115.0, 50.0,
            -112.5, 50.0,
            -110.0, 50.0,
            -107.5, 50.0,
            -105.0, 50.0,
            -102.5, 50.0,
            -100.0, 50.0,
            -97.5, 50.0,
            -95.0, 50.0,
            -92.5, 50.0,
            -90.0, 50.0
          ]),
          maximumHeights: [100000, 200000, 100000, 200000, 100000, 200000, 100000, 200000, 100000, 200000,
            100000
          ], // 指定用于墙的顶部的高度数组，而不是每个位置的高度。
          minimumHeights: [0, 100000, 0, 100000, 0, 100000, 0, 100000, 0, 100000, 0], // 指定要用于墙的底部而不是地球表面的高度数组。
          material: Cesium.Color.BLUE.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.BLACK
        }
      });

      // 点 Points
      viewer.entities.add({
        name: 'xuanwuhu',
        position: Cesium.Cartesian3.fromDegrees(-115.0, 30.0),
        point: {
          pixelSize: 10,
          color: Cesium.Color.RED,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2
        },
        label: {
          text: '啦啦啦啦这测试的文字',
          // 文字样式
          font: '24pt sans-serif',
          style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL  FILL_AND_OUTLINE OUTLINE
          fillColor: Cesium.Color.RED,
          // 边框
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2,
          // 背景
          // showBackground: true,//指定标签后面背景的可见性
          // backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.8), // 背景颜色
          // backgroundPadding: new Cesium.Cartesian2(20, 20),//指定以像素为单位的水平和垂直背景填充padding
          // 尺寸
          scale: 1.0, //指定应用于文本的比例
          // 位置
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // CENTER LEFT RIGHT
          verticalOrigin: Cesium.VerticalOrigin.BASELINE, //BASELINE BOTTOM CENTER TOP
          // 偏移
          // eyeOffset: new Cesium.Cartesian3(100, 100, 100), //指定眼睛偏移的属性
          pixelOffset: new Cesium.Cartesian2(10, 0) //指定像素偏移量的属性
        }
      });

      // 广告牌 Billboards 广告牌可以显示一个图片
      viewer.entities.add({
        name: "广告牌",
        position: Cesium.Cartesian3.fromDegrees(-115.0, 35.0, 0),
        //广告牌
        billboard: {
          image: '../../../static/models/demo.jpg',
          width: 50,
          height: 50,
          // scale: 1.0, //指定应用于图像大小的比例
          // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // pixelOffset: new Cesium.Cartesian2(0, 10), // 偏移
          // rotation: 0, // 旋转
          imageSubRegion: new Cesium.BoundingRectangle(25, 25, 50,
            50), //(x，y，宽度，高度) 用于广告牌的图像的子区域，而不是整个图像，以像素为单位从左下角开始测量。
          // sizeInMeters: true //指定此广告牌的尺寸是否应以米为单位进行测量
        },
        label: {
          text: '广告牌Citizens Bank Park',
          font: '12pt monospace',
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          outlineWidth: 2,
          verticalOrigin: Cesium.VerticalOrigin.TOP,
          pixelOffset: new Cesium.Cartesian2(0, 30)
        }
      });
      // 标签 Labels

      viewer.zoomTo(viewer.entities);

    },
    methods: {
      // 折线卷 entity.polylineVolume

      // 根据圆长计算每个点的位置
      computeCircle(radius) {
        var Cesium = this.Cesium;
        var positions = [];
        for (var i = 0; i < 360; i++) {
          var radians = Cesium.Math.toRadians(i);
          positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
        }
        return positions;
      },

      // 计算星状的位置
      computeStar(arms, rOuter, rInner) {
        var Cesium = this.Cesium;
        var angle = Math.PI / arms;
        var length = 2 * arms;
        var positions = new Array(length);
        for (var i = 0; i < length; i++) {
          var r = (i % 2) === 0 ? rOuter : rInner;
          positions[i] = new Cesium.Cartesian2(Math.cos(i * angle) * r, Math.sin(i * angle) * r);
        }
        return positions;
      },

    }
  }
</script>

<style scoped="scoped">
  .container {
    width: 100%;
    height: 100%;
  }

  #cesiumContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    /*  overflow: hidden; */
  }
</style>
